<template>
	<div class="exam_classify_table">
		<el-table :data="tableData" height="100%" stripe style="width: 100%">
			<el-table-column prop="orderBy" label="排序" width="50"></el-table-column>
			<el-table-column prop="name" label="分类名称" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span class="cup" @click="handleEdit(row)">{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="classType" label="类型" width="100">
				<template slot-scope="{ row }">
					<span v-if="row.classType == 1" class="color-primary">试卷</span>
					<span v-if="row.classType == 2" class="color-success">考试</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template slot-scope="{ row }">
					<el-tag v-if="row.status == 1" size="small">正常</el-tag>
					<el-tag v-if="row.status == 2" size="small" type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="des" label="备注" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg">
				<el-empty :image-size="200"></el-empty>
			</div>
		</el-table>
	</div>
</template>
<script>
export default {
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10,
				pid: 0,
				classType: 1
			},
			tableData: []
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshExamClassifyList', (v) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshExamClassifyList');
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('sysClassifyList', this.listQuery);
			this.tableData = res.data;
		},
		handleEdit(row) {
			this.$bus.$emit('showDialogExamClassifyAdd', row);
		},
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		async delete(row) {
			await this.$store.dispatch('sysClassifyDel', row);
			this.getList();
		}
	}
};
</script>
<style lang="scss" scoped>
.exam_classify_table {
	flex: 1;
	overflow: hidden;
	margin-top: 10px;
	.el-table {
		margin-top: 0;
	}
}
</style>
